<template>

  <div class="courseFileContList">

    <div style="display: flex">
      <div style="width: 300px">
        <el-card>

          <div style="margin-bottom: 10px; display: flex; align-items: center">
            <el-input
              v-model="filterText"
              style="flex-grow: 1"
              size="small"
              placeholder="输入关键字进行过滤"/>
            <el-button
              type="danger"
              style="margin-left: 10px"
              icon="el-icon-refresh-left"
              size="mini"
              circle
              @click="clearSelection"/>
          </div>

          <dic-tree
            ref="tree"
            v-model="listQuery.params.catId"
            dic-code="course_file_catalog" />
        </el-card>
      </div>
      <div style="flex-grow: 1; padding-left: 20px">
        <data-table
          ref="pagingTable"
          :options="options"
          :list-query="listQuery"
          @add="handleAdd"
          @edit="handleEdit"
        >
          <template #filter-content>
            <dic-list-select v-model="listQuery.params.fileType" dic-code="course_file_type" title="课件类型" />
            <el-input v-model="listQuery.params.title" placeholder="搜索课件名称" size="small" style="width: 200px;" class="filter-item" />

          </template>

          <template #data-columns>

            <el-table-column
              label="课件名称"
              prop="title"
              show-overflow-tooltip
            >

              <template v-slot="scope">
                <detail-link :id="scope.row.id" :title="scope.row.title" permission="course:file:update" @click="handleEdit" />
              </template>

            </el-table-column>

            <el-table-column
              label="课件类型"
              prop="fileType_dictText"
              align="center"
              width="110px"
            />

            <el-table-column
              label="课程类目"
              prop="catId_dictText"
              align="center"
              width="110px"
              show-overflow-tooltip
            />

            <el-table-column
              label="上传状态"
              align="center"
              width="90px"
            >
              <template v-slot="scoped">
                <span :style="{color:scoped.row.fileStatus=='processing'?'orange':'green'}">{{ scoped.row.fileStatus=='processing'?'正在生成':'已完成' }}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="文件大小"
              prop="fileSize"
              align="center"
              width="110px"
            />

            <el-table-column
              label="课件时长"
              align="center"
              width="100px"
              show-overflow-tooltip
            >

              <template v-slot="scope">
                <span v-if="scope.row.duration===0">无</span>
                <span v-else>
                  <sec-format :value="scope.row.duration"/>
                </span>
              </template>

            </el-table-column>

            <el-table-column
              label="创建人"
              align="center"
              prop="createBy_dictText"
              width="120px"
              show-overflow-tooltip
            />

            <el-table-column
              label="创建时间"
              align="center"
              prop="createTime"
              width="160px"
            />

            <el-table-column
              label="操作"
              align="center"
              width="130px"
            >

              <template v-slot="scope">
                <el-link type="primary" icon="el-icon-view" style="margin-left: 10px" @click="handlePreview(scope.row)">在线预览</el-link>
              </template>

            </el-table-column>

          </template>

        </data-table>
      </div>
    </div>

    <el-dialog :close-on-click-modal="false" :visible.sync="previewVisible" title="文件预览" width="70%" @close="closePreview">
      <el-alert
          v-if="previewData.fileType==='33'"
          title="内容由ai数字人生成，请注意甄别内容"
          type="info">
      </el-alert>

      <div style="overflow-y: auto;">
        <div v-if="previewData.fileType==='33'">
          <video-player v-model="previewData.viewUrl" :ref-id="previewData.id" />
        </div>
        <pdf-reader v-if="previewData.fileType==='11'" :src="previewData.viewUrl" />
        <pdf-reader v-if="previewData.fileType==='22'" :src="previewData.fileUrl" />
      </div>
    </el-dialog>

    <CourseFile ref="CourseFile" @DHCompleteGen="completeGen" @getList="$refs.pagingTable.getList()" />
  </div>

</template>

<script>
import DataTable from '@/components/DataTable'
import DicListSelect from '@/components/DicListSelect'
import { fetchTree } from '@/api/sys/dict/value'
import DicTree from '@/components/DicTree/index'
import DetailLink from '@/components/DetailLink'
import VideoPlayer from '@/components/VideoPlayer'
import PdfReader from '@/components/PdfReader'
import SecFormat from '@/components/SecFormat'
import CourseFile from '@/components/AddCourseFile'

export default {
  name: 'CourseFileList',
  components: { SecFormat, PdfReader, VideoPlayer, DetailLink, DicTree, DicListSelect, DataTable, CourseFile },
  data() {
    return {
      fileList: [],
      isEdit: false,
      tips: '',
      accept: '',
      data: {},
      listQuery: {
        current: 1,
        size: 10,
        params: {
          courseId: this.courseId,
          catId: null
        }
      },
      filterText: '',

      options: {

        // 可批量操作
        multi: true,

        add: {
          enable: true,
          permission: 'course:file:add'
        },
        edit: {
          enable: true,
          permission: 'course:file:update'
        },
        delete: {
          enable: true,
          permission: 'course:file:delete',
          url: '/api/course/file/delete'
        },

        // 列表请求URL
        listUrl: '/api/course/file/paging'
      },

      previewVisible: false,
      previewData: {},

      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },

  created() {
    const id = this.$route.params.courseId
    if (id !== undefined) {
      this.listQuery.params.courseId = id
    }

    fetchTree({ dicCode: 'course_file_catalog' }).then(res => {
      this.treeData = res.data
    })
  },

  methods: {
    handleAdd() {
      this.$refs.CourseFile.handleAdd()
    },
    handleEdit(id) {
      this.$refs.CourseFile.handleEdit(id)
    },

    handleSave() {
      this.$refs.pagingTable.getList()
    },

    catalogSelected(node) {
      console.log('node', node)
      this.listQuery.params.catId = node.id
    },

    handlePreview(data) {
      if (data.fileStatus == 'processing') {
        this.$message.error('数字人生成中，请稍后查看')
        return
      }
      this.previewVisible = true
      this.previewData.fileType = data.fileType
      this.previewData.viewUrl = data.viewUrl
      this.previewData.fileUrl = data.fileUrl
    },

    closePreview() {
      this.previewData = {}
    },

    clearSelection() {
      this.postForm.catId = ''
      this.listQuery.params.catId = ''
      this.filterText = ''
    },
    completeGen(e) {
      if (e) {
        this.$refs.pagingTable.refresh()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.courseFileContList {
  /deep/.el-button--success {
    background-color: #6f5af6 !important;
    border-color: #6f5af6 !important;
    position: relative;
    margin-right: 50px
  }
  /deep/.el-button--success:active {
    background-color: #501fe3 !important;
    border-color: #501fe3 !important;
  }
  /deep/.el-button--success::before {
    content: '';
    width: 60px;
    height: 18px;
    background: url('../../../../assets/exam/corner_mark.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: -50%;
    right: -50%;
  }
}
</style>
